<template>
    <div>
    <!-- 导航栏 -->
    <el-row>
      <h1 style="margin-top:80px"></h1>
      <span style="font-size:40px;font-family: '楷体';color:red;margin-left:680px;">硅谷体检中心</span>
      <img src="static/img/tijian.jpeg" id="show" style="opacity:0.8;">
      <el-col :span="24" style="display:inline"><div style="height: 180px;display:inline"></div></el-col>
    </el-row>
    <el-row id="about">
      <el-col :span="8" :offset="6">
        <!-- 透明度 opacity:0.8; filter:alpha(opacity=60) -->
        <el-card class="box-card" style="opacity:0.8;">
          <div slot="header" class="clearfix">
            <span>硅谷体检中心登录页面</span>
          </div>
          <div class="text item">
            <el-form :model="userValidateForm" ref="userValidateForm"
                             label-width="100px" class="demo-ruleForm">
              <el-form-item label="手机号" prop="memPhone"
                :rules="[
                { required: true, message:'手机号不能为空' },
                { pattern:/^1[3|5|7|8|9]\d{9}$/, message:'请输入正确的号码格式'}
                ]" style="width:90%">
                <el-input type="text" v-model="userValidateForm.memPhone" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="密码" prop="memPassword"
                :rules="[{ required: true, message: '密码不能为空' }]" style="width:90%">
                <el-input type="password" v-model="userValidateForm.memPassword" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submitForm('userValidateForm')" >提交</el-button >
                <el-button @click="resetForm('userValidateForm')">重置</el-button>
              </el-form-item>
              <p style="text-align: center;">没有账号,需要<router-link to="/logon">注册</router-link></p>
            </el-form>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'Login',
  data () {
    return {
      userValidateForm: {
        memPhone: '',
        memPassword: ''
      },
      activeIndex: '1',
      activeIndex2: '1'
    }
  },
  methods: {
    submitForm (formName) {
    // 点击提交的加载事件
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      // 计时器
      setTimeout(() => {
        // 关闭计时器
        loading.close()
        this.$axios.post(`/api/logincon`, this.userValidateForm).then(result => {
          if (this.userValidateForm.memPhone === result.data.memPhone && this.userValidateForm.memPassword === result.data.memPassword) {
            // alert('登录成功')
            var user = result.data// 这个user应该是后台返回的用户对象
            // 将用户信息保存在store中
            this.$store.commit('saveUser', user)
            sessionStorage.setItem('user', JSON.stringify(user))
            // 跳转到首页(将路由切换到/home)
            this.$router.push('/home')
            this.$message({
              type: 'success',
              message: '登陆成功'
            })
          } else {
          // 登录失败清空user对象里面的值
            this.$message.error('账号或者密码错误')
            this.$store.commit('saveUser', {})
          }
        })
      }, 500)
    },
    // 重置按钮,清空input的值
    resetForm (formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style>
.text {
  font-size: 14px;
}
.item {
  margin-bottom: 18px;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
.clearfix span{
  font-family: '楷体';
  font-size: 20px;
  color: red;
}
.box-card {
  width: 430px;
}
#guigu{
    position: absolute;
    top: 10px;
    right: 80px;
    font-family: '楷体';
    font-size: 25px;
    color: red;
}
#first{
    position: absolute;
    top: 5px;
    right: 10px;
}
span a{
    position: absolute;
    top: 15px;
    right: 350px;
    color:white;
    font-size: 18px;
    text-decoration: none;
}
span a:hover{
    color: red;
    text-decoration: none;
}
#about{
    position: absolute;
    top: 240px;
    right: 380px;
}
#show{
    background-repeat: no-repeat;
    position: absolute;
    top: 240px;
    left:200px
}
.frist_show{position: absolute;top: 0px;left:20px;width: 1500px;height: 50px;}
.frist_show .el-breadcrumb{margin-top: 15px;}
</style>
